import { useState } from "react";

function App(props) {
  // 每次渲染时都会初始化值 无意义 使用useState参数为函数的写法
  // const propsCount = props.count || 0

  // 此回调函数只会在组件初次渲染的时候执行
  const [count, setCount] = useState(() => {
    return props.count || 0;
  });
  const [person, setPerson] = useState({ name: "张三", age: 22 });
  return (
    <div>
      <span>
        count:{count} name:{person.name} age:{person.age}
      </span>
      <button onClick={() => setCount(count + 1)}>+1</button>
      {/* 传递一个新的状态值替换老的状态值 */}
      <button onClick={() => setPerson({ name: "李四", age: 30 })}>setLisi</button>
      {/* 如果只改变一个属性值 前面解构出所有属性 后面是覆盖或者追加的属性 */}
      <button onClick={() => setPerson({ ...person, name: "王五" })}>setWangwu</button>
    </div>
  );
}

export default App;
